<template>
  <div class="hotcommunity">
    <scrollMore
      :showMoreTitle="list.length >= per_page"
      :load="hottitle"
      :noMore="noMore"
    >
      <div class="boxall f-a-c f-j-a-c">
        <div class="hot f-a-c">
          <div class="bannercommunity">
            <div class="bannerlist">
              <div class="baner">
                <img src="../../../assets/image/hotlist.jpg" alt="" />
                <div class="title f-d-c">
                  <span>热门帖子</span>
                  <span
                    >给设计师看的帖子。做设计更要打开视野，行业资讯一站知晓!</span
                  >
                </div>
              </div>
            </div>

            <div class="hotlist">
              <div
                class="item click"
                v-for="(item, index) in list"
                :key="index"
                @click="hotlistClick(item, index)"
              >
                <div class="itembox f-j-sb-a-c">
                  <div class="left">
                    <div class="itemtitle f-a-c">
                      <svg-icon class="typesvg" :name="'icon-'+(index + 1)" v-if="index <=2"></svg-icon>
                      <span>{{ item.posts_content_raw }}</span>
                      <span class="hottype" v-if="index < 3">{{
                        index < 3 ? "热" : ""
                      }}</span>
                    </div>
                    <div class="content">
                      <span>{{ item.posts_content_raw }} </span>
                      <span style="margin-left: 10px">查看更多</span>
                      <svg-icon name="icon-sq-gd"></svg-icon>
                    </div>
                    <div class="itemread">
                      <!-- <span
                      >阅读:{{
                        item.read > 1000
                          ? item.read / 1000 + "K"
                          : item.read > 10000
                          ? item.read / 10000 + "W"
                          : ""
                      }}</span
                    > -->
                      <span>喜欢:{{ item.like_count }}</span>
                    </div>
                  </div>
                  <div class="right f-j-a-c">
                    <img class="rightimg" :src="item.img" alt="" />
                    <span class="time" v-if="item.time">{{ item.time }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="communityRight-boxs">
          <communityRight
            :friendcommunity="true"
            :user="true"
            :ercode="true"
          ></communityRight>
        </div>
      </div>
    </scrollMore>
  </div>
</template>

<script>
import scrollMore from "@/components/scrollMore.vue";
// import "vue3-video-play/dist/style.css";
// import { videoPlay } from "vue3-video-play";
import { gettags } from "@/axios/community.js";
import communityRight from "../views/communityHome/communityRight.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    communityRight,
    // videoPlay,
    scrollMore,
  },
  setup() {
    const videoElement = ref(null);
    const canvasElement = ref(null);
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      list: [],
      page: 1, //当前页数
      noMore: true, //是否还有下一页
      per_page: 0, //每页的数量
    });

    onMounted(() => {
      // data.list.forEach((item, index) => {
      //   item.time = 0;
      // });
      hottitle();
    });
    // 热门话题
    let hottitle = (more) => {
      if (more) {
        data.page += 1;
      } else {
        data.page = 1;
        data.noMore = true;
      }
      let id = "?tag_id=0&page=" + data.page;
      gettags({ id }).then((res) => {
        let resultData = res.data;
        let resultList = resultData.data;
        data.list = [...data.list, ...resultList];
        data.noMore = resultList < resultData.per_page;
        data.per_page = resultData.per_page;
      });
    };

    // const loadedmetadata = (index) => {
    //   var videoTime = document.getElementById("myvideo" + index);
    //   // console.log(videoTime.duration);
    //   data.list[index].time = getTime(videoTime.duration);
    // };

    // let getTime = (time) => {
    //   // 转换为式分秒
    //   let h = parseInt((time / 60 / 60) % 24);
    //   h = h < 10 ? "0" + h : h;
    //   let m = parseInt((time / 60) % 60);
    //   m = m < 10 ? "0" + m : m;
    //   let s = parseInt(time % 60);
    //   s = s < 10 ? "0" + s : s;
    //   // 作为返回值返回
    //   return m + ":" + s;
    // };

    // 跳转到详情
    let hotlistClick = (item) => {
      router.push({
        path: "/pages/sticky/sticky",
        query: {
          id: item.id,
        },
      });

      // router.push({
      //   path: "/pages/tags/tags",
      //   query: {
      //     id: item.id,
      //   },
      // });
    };
    onUnmounted(() => {});
    return {
      hottitle,
      hotlistClick,
      // getTime,
      videoElement,
      canvasElement,
      // loadedmetadata,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.rightimg {
  width: 138px;
  height: 138px;
  border-radius: 10px;
  object-fit: cover;
}
.hotcommunity {
  // position: relative; /*关键点*/
  // display: block;
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;

  .hot {
    margin-top: 10px;
    margin-right: 10px;
    flex: 1;
  }

  //  banner
  .baner {
    position: relative;
    > img {
      border-radius: 20px 20px 0 0;
      height: 100%;
    }
    .title {
      position: absolute;
      bottom: 20px;
      left: 21px;
      z-index: 1;
      > span {
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #ffffff;
        &:last-child {
          margin-top: 10px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}

.hotlist {
  .item {
    .itembox {
      padding-bottom: 30px;
      border-bottom: 1px solid #f5f6f7;
    }
    padding: 0 20px 30px 20px;
    background-color: #fff;
    .itemtitle {
      .typesvg {
        font-size: 26px;
      }
      > span {
        margin-left: 10px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      .hottype {
        padding: 2px 3px;
        background: #ff5547;
        border-radius: 4px 4px 4px 4px;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-left: 10px;
      }
    }
    .content {
      margin-left: 11px;
      margin-top: 22px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
    .itemread {
      > span {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
        margin-left: 11px;
        margin-top: 10px;
      }
    }
    &:first-child {
      padding-top: 20px;
    }
    &:last-child {
      .itembox {
        border-bottom: none;
      }
    }
  }
}
.left {
  flex: 1;
}
.right {
  position: relative;
  //   margin-left: 21px;
  width: 138px;
  height: 140px;
  border-radius: 10px 10px 10px 10px;

  .video {
    border-radius: 10px 10px 10px 10px;

    width: 100%;
    height: 100%;
  }
  .time {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.boxall {
  max-width: 1360px;
  min-width: 1110px;
  margin: 0 auto;
  // min-width: 1360px;
  align-items: flex-start;
  // overflow: auto; /*关键点*/
  // padding: 0 20%;
  // flex: 1;
  // max-width: 1360px;
  // margin: 0 auto;
  // position: absolute;
  // top: 0;
  //   background-color: red;
}
.communityRight-boxs {
  /* 兼容chorme */
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  // top: 180px;
  // box-sizing:border-box;
  z-index: 10;
  // margin-right: 25%;
  // width: 300px;
  // height: 100%;
}
</style>
